﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职称设置</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <style>
        /* 可以添加一些自定义样式 */
        .page-container {
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }

        body {
            background-color: #FFFFCC;
        }
        .caozuo {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>您正在做的业务是：人力资源--权限管理--添加用户</div>
        <div calss="caozuo">
            <button v-on:click="Upd">保存</button> &nbsp;&nbsp;
            <button v-on:click="Fan">返回</button>
        </div>
        <table>
            <tr>
                <td>用户名称：</td>
                <td width="400px"><el-input v-model="name"></el-input></td>
                <td>用户密码：</td>
                <td width="400px"><el-input type="password" show-password v-model="pwd"></el-input></td>
            </tr>
            <tr>
                <td>真实姓名：</td>
                <td><el-input v-model="zsname"></el-input></td>
                <td>用户身份：</td>
                <td>
                    <el-select v-model="roles"
                               placeholder="Select"
                               size="large"
                               style="width: 180px">
                        <el-option v-for="item in op"
                                   :key="item.value"
                                   :label="item.rolesName"
                                   :value="item.rolesID" />
                    </el-select>
                </td>
            </tr>
        </table>
    </div>
    <script>
        const { createApp, ref, onMounted } = Vue;

        const app = createApp({
          setup() {
              const urid = ref('')
              const uid = ref('')
              const name = ref('')
              const zsname = ref('')
              const pwd = ref('')

              const op = ref([])
              const roles = ref()
              function xlk(){
                  axios.get("/User_Manage/select_r")
                  .then(res=>{
                      console.log(res.data.zhi)
                      op.value = res.data.zhi
                  })
              }
              xlk()

              function Fan(){
                  window.location.href = `/User_Manage/Index`
              }

              function Upd(){
                axios.get("/User_Manage/UpdUR",{
                  params: {
                      urid:urid.value,
                      id:uid.value,
                      name:name.value,
                      pwd:pwd.value,
                      zsname:zsname.value,
                      roles:roles.value
                  }
                })
                .then(res=>{
                  ElementPlus.ElMessage.success('修改成功');
                  setTimeout(() => {
                      Fan();
                    }, 1000);
                })
                .catch(err=>{
                  ElementPlus.ElMessage.error('修改失败，请重试');
                  console.log("修改失败:"+err);
                })
              }

              onMounted(() => {
                    const urlParams = new URLSearchParams(window.location.search);
                    sel(urlParams.get('id'))
                });

              function sel(id){
                  axios.get("/User_Manage/selectById",{
                      params: {
                          id:id
                      }
                  })
                  .then(res=>{
                      console.log(res.data.zhi)
                      roles.value = res.data.zhi.rolesID
                      name.value = res.data.zhi.u_name
                      zsname.value = res.data.zhi.u_true_name
                      pwd.value = res.data.zhi.u_password
                      urid.value = res.data.zhi.userRolesID
                      uid.value = res.data.zhi.u_id
                  })
              }



              return {
                  op,
                  roles,
                  Fan,
                  Upd,
                  name,
                  zsname,
                  pwd,
              }
          }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html>
